<template>
	<view class="page" >
		<view class="right_list" v-if='!isFocus && !title'>
			<view class="right">
				<view class="index-item">区县定位</view>
				<view class="index-item" @click="scrollTo('#')">#</view>
				<view class="index-item" v-for="(item,index) in cityData" :key="index" @click="scrollTo(item.key)">
					{{ item.key }}
				</view>
			</view>
		</view>
		<view class="search">
			<view class="search_box">
				<view class="search_input_box">
					<input  placeholder-class="iconSearch" maxlength="20" v-model="title"
						confirm-typ="search" @confirm="onSearch()" class="search_input"  :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'>
					<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
						<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
						<text>区域名称</text>
					</view>
				</view>
				<view class="right_close" @click="isFocus = false;title = ''">
					取消
				</view>
				
			</view>
		</view>
		<block v-if="title">
			<view class="search_res" v-if="searchList && searchList.length  > 0">
				<view class="row" v-for="(row,i) in searchList" @click="onSelectCity(row,null)">
					{{row.name}}
				</view>
			</view>
		</block>
		<view class="select-city" v-if='!isFocus && !title'>
			<scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true"
				:style="{ height: windowHeight }" class='select-city-list'>
				<view class="current_box" id="current" >
					<block v-if='topList && topList.length'>
						<view class="title">
							当前定位/房屋所在地
						</view>
						<view class="current_list">
							<view class="current_row" v-for='(it,ii) in topList' :key='ii' @click="onSelectCity(it,null)">
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/map01.png" mode="scaleToFill" v-if='address && it.id == address.id '></image>
								<text>{{it.name}}</text>
							</view>
						</view>
					</block>
				</view>
				<view class="row_list" v-for="(row,i) in cityData" :key="i" :id="row.key">
					<view class="key">{{ row.key }}</view>
					<view class="value" v-for="(row3,i3) in row.value" :key='i3' @click="onSelectCity(row3,null)"
						:class='{value1:i == row.value.length -1,active:address.id == row3.id}'>
						{{row3.name}}
					</view>
				</view>
			</scroll-view>

		</view>

	</view>

</template>

<script>
	import {
		getAreaFirst,getAreaFilter
	} from "./static/api.js"
	export default {
		data() {
			return {
				isFocus:false,
				title:'',
				searchloading:false,
				searchList:[],
				cityData: [],
				windowHeight: '',
				scrollIntoId: '',
				address: {
					id: '',
					name: '',
				},
				topList:[],
			}
		},
		onLoad() {
			if(this.$store.state.addressSelect) this.address = this.$store.state.addressSelect
			this.topList = this.$store.state.currentAddressList
			if(this.address && this.address.id) this.onSelectCity(this.address,true)
			if(this.$store.state.cityData && this.$store.state.cityData.length > 0){
				this.cityData = this.$store.state.cityData
			}else{
				 this.getList()
			}
			this.getSystemInfo()
		},

		methods: {
			async onSearch(){
				this.searchloading = true
				uni.showLoading()
				try{
					var res = await getAreaFilter({word:this.title ? this.title.trim() : '' })
					uni.hideLoading()
					this.searchloading = false
					if(res && res.length > 0){
						this.searchList = res
					}else{
						uni.showToast({title:'请输入正确的区域!',icon:'none'})
					}
				}catch{
					this.searchloading = false
					uni.hideLoading()
				}
			},
			async getList() {
				uni.showLoading()
				try {
					this.cityData = await getAreaFirst()
					this.$store.commit('setCityData',this.cityData)
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				}
			},
			getSystemInfo() {
				uni.getSystemInfo().then(([error, data]) => {
					this.windowHeight = `${data.windowHeight}px`
				})
			},
			scrollTo(letter) {
				this.scrollIntoId = letter === '#' ? 'current' : letter
			},
			onSelectCity(city,flag) {
				this.address.id = city.id
				this.address.name = city.name
				if(this.topList && this.topList.length > 0){
					if(this.topList.findIndex(row=>row.id == this.address.id) == -1){
						this.topList = [Object.assign({},this.address),...this.topList]
					}else{
						this.topList.splice(this.topList.findIndex(row=>row.id == this.address.id),1)
						this.topList = [Object.assign({},this.address),...this.topList]
					}
				}else{
					this.topList = [Object.assign({},this.address)]
				}
				this.$store.commit('setAddressSelect',this.address)
				if(this.topList.length > 10)  this.topList = this.topList.slice(0,10)
				this.$store.commit('setCurrentAddressList',this.topList)
				if(flag) return
				uni.navigateBack()
			}

		}

	}
</script>



<style lang="scss" scoped>
	.page {
		position: relative;
		padding: 0 90rpx 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #F6f7f7;
	}
	.select-city-list{
		padding-top: 80rpx;
		box-sizing: border-box;
	}
	.current_box{
		// margin-top: 80rpx ;
		width: 100%;
		padding: 0  36rpx 0;
		box-sizing: border-box;
		.title{
			padding-top: 40rpx;
			font-size: 30rpx;
			color:#808080;
			line-height: 42rpx;
		}
		.current_list{
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
		}
		.current_row{
			margin: 0 20rpx 20rpx 0;
			mix-width:180rpx;
			padding: 20rpx;
			font-size: 28rpx;
			background: #ffffff;
			line-height: 40rpx;
			border: 1rpx solid #e8e8e8;
			text-align: center;
			border-radius: 10rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 5rpx;
				vertical-align: middle;
			}
		}
	}
	.right_list {
		position: absolute;
		right: 0;
		width: 70rpx;
		background-color: #fff;
		height: 100vh;
		display: flex;
		align-items: center;
		z-index: 99;
		color: #2B2B2B;
		font-size: 22rpx;
		.right {
			padding: 24rpx 0;
			.index-item {
				width: 70rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				// margin-bottom: 4rpx;
				// height: 42rpx;
				text-align: center;
			}
		}
	}
	.section {
		width: 100%;
		margin-bottom: 19rpx;
		background-color: pink;
		.city-title {
			color: #333;
			font-size: 28rpx;
			margin-bottom: 28rpx;
		}
		.letter {
			width: 44rpx;
			height: 44rpx;
			color: #fff;
			border-radius: 100%;
			background-color: #2f9bfe;
			font-size: 28rpx;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
	}
	.row_list {
		width: 100%;
		.key {
			padding: 20rpx 24rpx;
			padding: 20rpx 24rpx;
			font-size: 34rpx;
			color: #808080;
			width: 100%;
			box-sizing: border-box;
		}
		.value {
			background-color: #fff;
			font-size: 34rpx;
			padding: 20rpx 24rpx;
			color: #282828;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 2rpx solid #ededed;
		}
		.value1 {
			border-bottom: 0
		}
	}
	
	//
	.search {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		z-index: 9999;
		box-sizing: border-box;
		// padding: 0 32rpx;
		.search_box {
			width: 676rpx;
			height: 64rpx;
			margin-left: 38rpx;
			position:relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.search_input_box{
			position:relative;
			width: calc(100% - 100rpx);
		}
		.search_input{
			width: 100%;
			height: 64rpx;
			background: #f2f2f2;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #adadad;
			padding: 0 20rpx;
			box-sizing:border-box;
		}
		.right_close{
			width: 80rpx;
			text-align: right;
			color:#999;
			font-size:24rpx
		}
		.select_text1{
				font-size: 28rpx;
				line-height: 40rpx;
				color:#ADADAD;
				position: absolute;
				left: 50%;
				top:50%;
				transform: translate(-50%,-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				
			}
		
	}
	.search_res{
		padding:160rpx 36rpx 60rpx;
		width:100%;
		box-sizng:border-box;
		min-height: calc(100vh - 280rpx);
		.row{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #C0C0C0;
			font-size: 28rpx;
			color:#282828;
		}
	}
</style>
